<template>
  <view class="hotHome">
    <el-card class="cardel">
      <template #header>
        <div class="card-header">
          <span>今日热点</span>
        </div>
      </template>

      <el-table :data="tableList" border style="width: 100%">
        <el-table-column prop="dateName" label="日期" :align="'center'" />
        <el-table-column prop="dateId" label="热点" :align="'center'">
          <template #default="scope">
            <el-select
              v-model="tableList[parseInt(scope.row.date) - 1].dateId"
              size="large"
              style="width: 240px"
              @change="
                onchangehot(
                  parseInt(scope.row.date) - 1,
                  tableList[parseInt(scope.row.date) - 1].dateId
                )
              "
            >
              <el-option
                v-for="item in hotlist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <template #footer> </template>
    </el-card>
  </view>
</template>

<script lang="ts" setup>
import {
  postSelectTodaySpecials,
  gethotspotgoodslist,
  Addhotspotlist,
} from "@/api/service/hotspot";
import { ElMessage } from "element-plus";

const tableList = ref([
  {
    dateName: "星期一",
    date: "1",
    dateId: "",
    dataidName: "",
  },
  {
    dateName: "星期二",
    date: "2",
    dateId: "",
    dataidName: "",
  },
  {
    dateName: "星期三",
    date: "3",
    dateId: "",
    dataidName: "",
  },
  {
    dateName: "星期四",
    date: "4",
    dateId: "",
    dataidName: "",
  },
  {
    dateName: "星期五",
    date: "5",
    dateId: "",
    dataidName: "",
  },
  {
    dateName: "星期六",
    date: "6",
    dateId: "",
    dataidName: "",
  },
  {
    dateName: "星期天",
    date: "7",
    dateId: "",
    dataidName: "",
  },
]);
const getQuerylist = async () => {
  let res = await postSelectTodaySpecials();

  for (let v in res) {
    if (res[v] != null) {
      tableList.value[parseInt(v) - 1].dateId = res[v].id;
      tableList.value[parseInt(v) - 1].dataidName = res[v].name;
    } else {
      tableList.value[parseInt(v) - 1].dateId = "";
      tableList.value[parseInt(v) - 1].dataidName = "";
    }
  }
};
const hotlist: any = ref([]);
const getgoodslist = async () => {
  let res = await gethotspotgoodslist({
    pageNo: 1,
    pageSize: 60,
    name: "",
    status: 1,
    categoryId: "",
  });
  console.log(res);
  hotlist.value = res.lists;
};
const onchangehot = async (i: any, val: any) => {
  console.log(val);
  const selectedOption = hotlist.value.find((item: any) => item.id === val);
  if (selectedOption) {
    console.log("选中的数据（label）：", selectedOption.name);
  }
  tableList.value[i].dataidName = selectedOption.name;
  let list = JSON.parse(
    '{"' +
      parseInt(i + 1) +
      '":{"id":"' +
      tableList.value[i].dateId +
      '","name":"' +
      tableList.value[i].dataidName +
      '"}}'
  );
  console.log(list);
  let res = await Addhotspotlist(list);
  ElMessage({
    message: "修改成功.",
    type: "success",
  });
};
onMounted(() => {
  getQuerylist();
  getgoodslist();
});
</script>

<style lang="scss">
.hotHome {
  height: calc(100vh - 90px - 32px - 20px);
  width: 100%;
  display: inline-block;
  .cardel {
    width: 800px;
    margin: 50px auto;
  }
}
</style>